<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas {
            display:border;
            margin:20px auto;
            border:2px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="800" height="500"></canvas>
    <script>
        var cas = document.querySelector('canvas');
        var ctx = cas.getContext('2d');
        //画动画
        // var img = new Image();
        // img.src="img/1.png";
        //动画封装
        function AnimateImg(option){
            if(this === window) return new AnimateImg(option);
            //参数
            this.cas = option.cas;
            this.ctx = this.cas.getContext('2d');
            this.src = option.src;
            this.x = option.data[0];
            this.y = option.data[1];
            //图片数量和宽高
            this.numbX = option.data[2];
            this.numbY = option.data[3];
            this.timer = null;
            //先加载
            this.load();
        }
        AnimateImg.prototype = {constructor:AnimateImg,
            load:function(){
                //把图片存起来
                //创建img
                var img = new Image,
                    that = this;
                    img.src = this.src;
                img.onload = function(){
                    that.img = this;
                    that.width = this.width / that.numbX;
                    that.height = this.height / that.numbY;
                    that.ctx.drawImage(this,
                        0,0,that.width,that.height,
                        that.x,that.y,that.width,that.height
                    );
                };
                return this;
            },
            do:function(style,move,speed){

                //参数
                var cas = this.cas,
                    ctx = this.ctx,
                    img = this.img,
                    x = this.x,
                    y = this.y,
                    numbX = this.numbX,
                    numbY = this.numbY,
                    width = this.width,
                    height = this.height,
                    that = this,
                    dir, line;
                //图片循环方向  和路线
                if(style[0] === 'x')  dir = 'x';
                else dir = 'y';
                line = style.slice(1);
                //移动整个坐标系到当前点
                // ctx.translate(x,y);
                var i = 0;
                //判断移动
                //绘制图片
                clearInterval(this.timer);
                if(dir === 'x'){
                    //如果是沿着x轴
                    this.timer = setInterval(function(){
                        //重新生成画布
                        ctx.clearRect(x,y,width,height);
                        ctx.beginPath();
                        //移动
                        switch(move){
                            case 'up' : y -= speed ; break;
                            case 'down' : y += speed ; break;
                            case 'left' : x -= speed ; break;
                            case 'right' : x += speed ; break;
                        }
                        //对坐标改变
                        that.x = x;
                        that.y = y;
                        //绘制
                        ctx.drawImage(img,
                                width * i++, height * line ,width,height,
                                x,y,width,height
                            );
                        if(i >= numbX) i = 0;
                        //如果超出边界 从另一端出来
                        if(x <= -width) that.x = x = cas.width;
                        if(y <= -height) that.y = y = cas.height;
                        if(x >= cas.width) that.x = x = -width;
                        if(y >= cas.height) that.x = x = -height;
                    },50);
                }else {
                    //如果是沿着y轴
                    this.timer = setInterval(function(){
                        //重新生成画布
                        ctx.clearRect(x,y,width,height);
                        ctx.beginPath();
                        //移动
                        switch(move){
                            case 'up' : y -= speed ; break;
                            case 'down' : y += speed ; break;
                            case 'left' : x -= speed ; break;
                            case 'right' : x += speed ; break;
                        }
                        //对坐标改变
                        that.x = x;
                        that.y = y;
                        ctx.drawImage(img,
                                width * line,height * i++,width,height,
                                x,y,width,height
                            );
                        if(i >= numbY) i = 0;
                        if(x <= -width) that.x = x = cas.width;
                        if(y <= -height) that.y = y = cas.width;
                    },200);
                }
            },
            stop:function(){
                clearInterval(this.timer);
            }
        };
        //测试小人
        var i = Math.floor(Math.random()*5) +1;
        var man1 = AnimateImg({
            cas:cas,
            src:'img/'+i+'.png',
            data:[200,200,4,4],
        });
        // var man2 = AnimateImg({
        //     cas:cas,
        //     src:'img/'+i+'.png',
        //     data:[300,300,4,4],
        // });
        var tank1 = AnimateImg({
            cas:cas,
            src:'img/TANK-' + i + '.png',
            data:[400,300,4,4]
        });
        setInterval(function(){
            onkeydown = function(e){
            switch(e.keyCode){
                case 32 : 
                    man1.stop();
                    tank1.stop();
                    break;
                case 37 : 
                    man1.do('x1','left',2); 
                    tank1.do('x1','left',2); 
                    break;
                case 38 : 
                    man1.do('x3','up',2); 
                    tank1.do('x3','up',2); 
                    break;
                case 39 : 
                    man1.do('x2','right',2); 
                    tank1.do('x2','right',2); 
                    break;
                case 40 : 
                    man1.do('x0','down',2); 
                    tank1.do('x0','down',2); 
                    break;
            }
        }
        },1000);
        





    </script>
</body>
</html>